<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">

<head th:replace="component/head :: head"></head>

<body>
	<header th:replace="component/header :: header"></header>

	<!-- Begin page content -->
	<div class="container">
		<div class="row">
			<div th:replace="component/sidebar"></div>

			<div class="col-md-9">
				<div th:replace="component/page-title::pageTitle('修改邮箱')"></div>

				<div class="row">
					<div class="col-md-8 offset-md-2">
						<form class="needs-validation" novalidate
							action="/user/update-mail" method="post">
							<div class="form-group row">
								<div class="col-md-3">
									<label class="col-form-label" for="emailInput">输入新邮箱：</label>
								</div>
								<div class="col-md-9">
									<input type="text" class="form-control" id="emailInput"
										name="mail" required />
									<div class="invalid-tooltip">请输入正确的邮箱</div>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-md-3">
									<label class="col-form-label" for="verificationCode">输入验证码：</label>
								</div>
								<div class="col-md-6">
									<input type="text" class="form-control"
										id="validationCodeInput" name="captchaFromFront"
										placeholder="验证码" required />
									<div class="invalid-tooltip">验证码不能为空</div>
								</div>
								<div class="col-md-3">
									<input type="button" id="getValidationCodeBtn"
										class="btn btn-secondary" value="获取验证码">
								</div>
							</div>
							<div class="form-group row">
								<div class="col-md-4 offset-md-4">
									<button type="submit" class="btn btn-primary btn-block">下一步</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>

	<footer th:replace="component/footer :: footer"></footer>

	<script>
		var messageData;
		var wait = 60; // 验证码60秒后才可获取下一个
		//正则表达式邮箱验证
		var getValidationCodeBtn = document
				.getElementById("getValidationCodeBtn");
		getValidationCodeBtn.addEventListener("click", verify);

		function verify() {
			var pattern = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
			var txt = document.getElementById("emailInput").value;
			if (!pattern.test(txt)) {
				//验证不通过
				document.getElementById("emailInput").classList
						.remove("is-valid");
				document.getElementById("emailInput").classList
						.add("is-invalid");
			} else {
				//验证通过
				document.getElementById("emailInput").classList
						.remove("is-invalid");
				document.getElementById("emailInput").classList.add("is-valid");

				getCaptcha();
				setButtonStatus(getValidationCodeBtn);
			}

		}

		/**
		 *获得验证码
		 */
		function getCaptcha() {
			var mail = document.getElementById("emailInput").value;
			$.ajax({
				url : "/restwarpper/send-mail-for-update-mail",
				type : "POST",
				data : mail,
				contentType : "application/json; charset=utf-8",
				dataType : 'json',
				async : false,
				success : function(result) {
					console.log(result);
					if (result.success == false) {
						if (result.code == 1002) {
							alert("无当前用户");
						} else if (result.code == 1004) {
							alert("邮箱为空");
						} else if (result.code == 9999) {
							alert("系统错误");
						}
					} else {
						alert("邮件已发送");
					}
				},
				error : function(e) {
					alert("异常,发送失败");
				}
			});
		}

		/**
		 *  设置按钮冷却状态
		 */
		function setButtonStatus(that) {
			if (wait == 0) {
				that.removeAttribute("disabled");
				that.value = "获取验证码";
				wait = 60;
			} else {
				that.setAttribute("disabled", true);
				that.value = wait + "秒后可以重新发送";
				wait--;
				setTimeout(function() {
					setButtonStatus(that)
				}, 1000)
			}
		}

		// Example starter JavaScript for disabling form submissions if there are invalid fields
		(function() {
			'use strict';
			window.addEventListener('load',
					function() {
						// Fetch all the forms we want to apply custom Bootstrap validation styles to
						var forms = document
								.getElementsByClassName('needs-validation');
						// Loop over them and prevent submission
						var validation = Array.prototype.filter.call(forms,
								function(form) {
									form.addEventListener('submit', function(
											event) {
										if (form.checkValidity() === false) {
											event.preventDefault();
											event.stopPropagation();
										}
										form.classList.add('was-validated');
									}, false);
								});
					}, false);
		})();
	</script>

	<div th:replace="component/footer-lib"></div>
</body>

</html>